<template>
    <div class="login">
        <div class="container">
            <a href="/#/index"><img src="http://51newland.cn/themes/new_land/images/logo.gif" alt="" /></a>
        </div>
        <div class="wrapper">
            <div class="container">
                <div class="login-form">
                    <h3>
                        <span class="checked">帐号登录</span>
                        <!-- <span class="sep-line">|</span> -->
                        <!-- <span>扫码登录</span> -->
                    </h3>
                    <div class="input">
                        <input type="text" placeholder="请输入帐号" v-model="username" />
                    </div>
                    <div class="input">
                        <input type="password" placeholder="请输入密码" v-model="password" />
                    </div>
                    <div class="btn-box">
                        <a href="javascript:;" v-if="pageType == 'login'" class="btn" @click="login">登录</a>
                        <a href="javascript:;" v-if="pageType == 'register'" class="btn" @click="register">注册</a>
                    </div>
                    <div class="tips">
                        <div class="sms"></div>
                        <div class="reg">
                            <span v-if="pageType == 'login'" @click="pageType = 'register'">立即注册</span>
                            <span v-if="pageType == 'register'" @click="pageType = 'login'">立即登录</span>
                            <span>|</span>忘记密码？
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-link">
                <a href="" target="_blank">51Newland</a><span>|</span>
                <a href="" target="_blank">51Newland</a>
            </div>
            <p class="copyright">Copyright ©2020 www.51Newland.cn All Rights Reserved.</p>
        </div>
    </div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
    name: 'login',
    data() {
        return {
            pageType: 'login',
            username: '15618741188',
            password: '123456',
            userId: '',
            loading: false
        };
    },
    methods: {
        ...mapActions(['saveUserName', 'saveCartCount']),
        login() {
            let { username, password } = this;
            this.loading = true;
            this.$http
                .post('/api/member/login', {
                    username: username,
                    password: password
                })
                .then((res) => {
                    this.loading = false;
                    let { userInfo, tokenHead, token } = res;
                    localStorage.storetokenHead = tokenHead;
                    localStorage.storetoken = token;
                    this.$cookie.set('userId', userInfo.id, { expires: 'Session' });
                    this.saveUserName(userInfo.username);
                    this.$router.push({
                        // path:'/index'对应路由起的name:index
                        // 【注：用params传参必须使用name跳转路由；而用query传参必须使用path跳转路由】
                        name: 'index',
                        params: {
                            from: 'login'
                        }
                    });
                })
                .catch((err) => {
                    this.loading = false;
                    if (err.msg) {
                        this.$message.error(err.msg);
                    }
                });
        },
        register() {
            let { username, password } = this;
            this.$http
                .post('/api/member/register', {
                    username: username,
                    password: password
                })
                .then(() => {
                    this.pageType = 'login';
                    this.$message.success('注册成功');
                })
                .catch((err) => {
                    this.loading = false;
                    if (err.msg) {
                        this.$message.error(err.msg);
                    }
                });
        }
    }
};
</script>
<style lang="scss">
@import './../assets/scss/base.scss';
@import './../assets/scss/mixin.scss';
@import './../assets/scss/config.scss';
.login {
    & > .container {
        height: 113px;
        img {
            width: auto;
            height: 100%;
        }
    }
    .wrapper {
        background: url('/imgs/login-bg.jpg') no-repeat center;
        .container {
            height: 576px;
            .login-form {
                box-sizing: border-box;
                padding-left: 31px;
                padding-right: 31px;
                width: 410px;
                height: 510px;
                background-color: #ffffff;
                position: absolute;
                bottom: 29px;
                right: 0;
                h3 {
                    line-height: 23px;
                    font-size: 24px;
                    text-align: center;
                    margin: 40px auto 49px;
                    .checked {
                        color: #ff6600;
                    }
                    .sep-line {
                        margin: 0 32px;
                    }
                }
                .input {
                    display: inline-block;
                    width: 348px;
                    height: 50px;
                    border: 1px solid #e5e5e5;
                    margin-bottom: 20px;
                    input {
                        width: 100%;
                        height: 100%;
                        border: none;
                        padding: 18px;
                    }
                }
                .btn {
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    margin-top: 10px;
                    font-size: 16px;
                }
                .tips {
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    cursor: pointer;
                    .sms {
                        color: #ff6600;
                    }
                    .reg {
                        color: #999999;
                        span {
                            margin: 0 7px;
                        }
                    }
                }
            }
        }
    }
    .footer {
        height: 100px;
        padding-top: 60px;
        color: #999999;
        font-size: 16px;
        text-align: center;
        .footer-link {
            a {
                color: #999999;
                display: inline-block;
            }
            span {
                margin: 0 10px;
            }
        }
        .copyright {
            margin-top: 13px;
        }
    }
}
</style>
